@model ZLMediaServerManagent.Models.ViewDto.StreamProxyDataSourceDto

<link rel="stylesheet" href="/assets/js/vendor/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href="/assets/js/vendor/owl-carousel/css/owl.theme.css">

<!-- tile -->
<section class="tile color transparent-black">

    <!-- tile header -->
    <div class="tile-header">
        <h1><strong>拉流</strong> 列表</h1>
        <div class="controls">
            <!-- <a href="#" class="refresh"><i class="fa fa-refresh"></i></a> -->
            <!-- <a href="#" class="remove"><i class="fa fa-times"></i></a> -->
        </div>
    </div>
    <!-- /tile header -->

    <!-- tile body -->
    <div class="tile-body">
        <form class="layui-form" role="form" onsubmit="return false;">
            <div class="row">
                <div class="col-md-3">
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label" style="color: #FFF;">域名:</label>
                        <div class="layui-input-block">
                            <select name="Sel_Domain" id="Sel_Domain" lay-search lay-filter="Sel_Domain"
                                style="height: 40px !important;">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label" style="color: #FFF;">应用:</label>
                        <div class="layui-input-block">
                            <select name="Sel_Application" id="Sel_Application" lay-search lay-filter="Sel_Application"
                                style="height: 40px !important;">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label" style="color: #FFF;">Id/名称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="txt_keyword" id="txt_keyword" placeholder="请输入关键字"
                                class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="layui-inline" style="line-height: 0px;margin-bottom: 12px; ">
                        <button class="layui-btn layui-btn-normal" data-type="reload" lay-submit
                            lay-filter="LAY-app-contlist-search" onclick="reload()">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>

            </div>


        </form>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto"
            style="border-bottom:1px solid rgba(0, 0, 0, 0.2)"></div>
        <table class="layui-hide" id="streamProxyList" lay-filter="streamProxyList"></table>
    </div>
    <!-- /tile body -->

    <!-- 主页内容 -->
    <div class="row">















    </div>
    <!-- 主页内容 -->


</section>

<script src="/assets/js/vendor/owl-carousel/owl.carousel.min.js"></script>


<!-- /tile -->
@if(Model.Power.Add)
{
<button class="mdui-fab mdui-fab-fixed mdui-ripple" style="color:#FFF;background-color: #EC5281; margin-right: 30px;"
    onclick="addStreamProxy()"><i class="fa fa-plus" aria-hidden="true"></i></button>
}



<script>


var domains = JSON.parse('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Domains.Select(p=>new {Id=p.Id+"",Name=p.DomainName}).ToList()))');
    var applications = JSON.parse('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Applications.Select(p=>new {Id=p.Id+"",Name=p.AppName,DomainId=p.DomainId+""}).ToList()))');
    var canAddDomainAndApp =@Model.Power.Audit.ToString().ToLower();
    domains.forEach(v => $("#Sel_Domain").append("<option value='" + v.Id + "'>" + v.Name + "</option>"));

var streamProxyId='';


    layui.use(['form', 'layedit', 'laydate', 'table'], function () {

        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table;

        form.render();



        table.render({
            elem: '#streamProxyList'
            , url: '/ZLServer/StreamProxy/'
            , method: 'post'
            , cellMinWidth: 80
            , autoSort: true
            , cols: [[
                { type: 'checkbox' }
                , { field: 'Id', title: 'Id', hide: true, }
                , { field: 'DomainId', title: 'DomainId', hide: true, }
                , { field: 'ApplicationId', title: 'ApplicationId', hide: true }
                , { field: 'StreamName', title: '流名称', sort: true }
                , { field: 'EnableHLS', title: '转HLS', sort: true, templet: '#tfHLSTemp' }
                , { field: 'EnableMP4', title: '录MP4', templet: '#tfMP4Temp' }
                , { field: 'ShowState', title: '状态', sort: true, templet: '#statusTemp' }
                , { field: 'Description', title: '描述', sort: true }
                , { field: 'DomainName', title: '域名', sort: true }
                , { field: 'ApplicationName', title: '应用', sort: true }
                , { field: 'CreateTs', title: '创建时间', sort: true }
                , { field: '', title: '操作', toolbar: '#bar' }
            ]]
            , where: {
                DomainId: $('#Sel_Domain').val(),
                ApplicationId: $('#ApplicationId').val(),
                keyword: $('#txt_keyword').val(),
            }
            , page: true
        });

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            //执行重载
            table.reload('streamProxyList', {
                where: {
                    DomainId: $('#Sel_Domain').val(),
                    ApplicationId: $('#ApplicationId').val(),
                    keyword: $('#txt_keyword').val(),
                }
            });
        });


        table.on('row(streamProxyList)', function (obj) {
            var data = obj.data;
            $(obj.tr).siblings().css("background-color", "");
            obj.tr.css("background-color", "rgba(0, 0, 0, 0.2)");

            // obj.tr.css("background-color", "#a3cf62");
            streamProxyId = data.Id;
        });

        table.on('rowDouble(streamProxyList)', function (obj) {
            var data = obj.data;
            $(obj.tr).siblings().css("background-color", "");
            obj.tr.css("background-color", "rgba(0, 0, 0, 0.2)");

            // obj.tr.css("background-color", "#a3cf62");
            streamProxyId = data.Id;
            play(streamProxyId,data.StreamName);

        });

        table.on('sort(streamProxyList)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //console.log(obj.field); //当前排序的字段名
            //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            //console.log(this); //当前排序的 th 对象
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('streamProxyList', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                    , DomainId: $('#Sel_Domain').val(),
                    ApplicationId: $('#ApplicationId').val(),
                    keyword: $('#txt_keyword').val(),
                }
            });
        });



        form.on('select(Sel_Domain)', function (data) {
            if (isEmpty(data.value)) {
                //清空应用选择框
                $("#Sel_Application").empty();
                $("#Sel_Application").append("<option value=''>全部</option>")
                form.render();

            }
            else {
                applications.forEach(v => {
                    if (v.DomainId === data.value) {
                        $("#Sel_Application").append("<option value='" + v.Id + "'>" + v.Name + "</option>")
                    }
                });
                form.render();
            }
        });
        //监听提交
        form.on('submit(submitForm)', function (data) {
            // showLoader('保存中....',60);
            // $.post("/Menu/Add", data.field, function (result) {
            //     closeLoader();
            //     if (result.Flag) {
            //         showGrowl('保存成功!', 'success', 3000);
            //         reload();
            //         layer.close(layuiWindow['editMenu' + menuId]); //再执行关闭
            //     }
            //     else {
            //         showGrowl(result.Msg,'danger',4000);

            //     }
            // });
            // return false;

        });
    });


    function addStreamProxy() {
        if (!canAddDomainAndApp) {
            showGrowl('请先添加域名和应用再添加拉流代理!', 'danger', 4000);
            return;
        }



        get('/ZLServer/AddStreamProxy', function (data, status, xhr) {
            if (xhr.status === 200) {
                var index = layer.open({
                    type: 1
                    , title: '添加拉流代理'
                    , closeBtn: false
                    , shade: 0
                    , area: ['590px', '600px']
                    , id: 'addAddStreamProxy'  //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , moveType: 1 //拖拽模式，0或者1
                    , content: data
                    , shadeClose: false //点击遮罩区域是否关闭页面
                    , zIndex: 1000
                });
                layuiWindow['addAddStreamProxy'] = index;
            }
            else {
                showGrowl('请求失败,错误码:' + xhr.status + "," + xhr.statusText, 'danger', 4000)
            }
        },
            function () {
                showGrowl('GET请求异常。', 'danger', 3000)
            }
        );


    }



    function editStreamProxy(id) {
        get('/ZLServer/EditStreamProxy?streamProxyId=' + id, function (data, status, xhr) {
            if (xhr.status === 200) {
                var index = layer.open({
                    type: 1
                    , title: '添加拉流代理'
                    , closeBtn: false
                    , shade: 0
                    , area: ['590px', '600px']
                    , id: 'editStreamProxy' + id  //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , moveType: 1 //拖拽模式，0或者1
                    , content: data
                    , shadeClose: false //点击遮罩区域是否关闭页面
                    , zIndex: 99999
                });
                layuiWindow['editStreamProxy' + id] = index;
            }
            else {
                showGrowl('请求失败,错误码:' + xhr.status + "," + xhr.statusText, 'danger', 4000)
            }
        },
            function () {
                showGrowl('GET请求异常。', 'danger', 3000)
            }
        );
    }


    function rePullStreamProxy(id) {
        //重新拉流
        // alert('重新拉流:' + id);
    }

    function play(id, name) {
        layer.open({
            type: 2
            , title: name
            , closeBtn: false
            , shade: 0
            , area: ['590px', '600px']
            , id: 'play' + id  //设定一个id，防止重复弹出
            , btnAlign: 'c'
            , closeBtn: 1
            , moveType: 1 //拖拽模式，0或者1
            , content: ['/ZLServer/Play?id=' + id, 'yes']
            , shadeClose: false //点击遮罩区域是否关闭页面
            , zIndex: 999999
        });

        return;//下面的代码停用    
        get('/ZLServer/Play?id=' + id, function (data, status, xhr) {
            if (xhr.status === 200) {
                var index = layer.open({
                    type: 1
                    , title: name
                    , closeBtn: false
                    , shade: 0
                    , area: ['590px', '600px']
                    , id: 'play' + id  //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , closeBtn: 1
                    , moveType: 1 //拖拽模式，0或者1
                    , content: data
                    , shadeClose: false //点击遮罩区域是否关闭页面
                    , zIndex: 1000
                });
                layuiWindow['play' + id] = index;
            }
            else {
                showGrowl('请求失败,错误码:' + xhr.status + "," + xhr.statusText, 'danger', 4000)
            }
        },
            function () {
                showGrowl('GET请求异常。', 'danger', 3000)
            }
        );
    }

    //启用停用
    function changeStreamPullState(sender, id) {
        alert('启用,停用');
    }
    //录制Mp4
    function changeEnableMp4(sender, id) {
        // alert('changeEnableMp4');
    }
    //转HLS
    function changeEnableHLS(sender, id) {
        // alert('changeEnableHLS');

    }

    function deleteStreamProxy(id) {
        var index = layer.confirm('确定要删除吗?', {
            title: '警告', btn: ['确定', '取消']
        }
            , function () {
                showLoader('删除中....', 60);
                $.post("/ZLServer/DeleteStreamProxy", { ids: [id] }, function (result) {
                    layer.close(index);
                    closeLoader();
                    if (result.Flag) {
                        reload();
                        layer.close(index);
                        showGrowl('删除成功!', 'success', 3000);
                    }
                    else {
                        showGrowl(result.Msg, 'danger', 4000);
                    }
                }, "json");
            }, function () {
                closeLoader();
                layer.close(index);
            });
    }

</script>



<script type="text/html" id="tfHLSTemp">

    {{#  if(d.EnableHLS==true){ }}
    <font color="#abe879">是</font>
    {{#  } else if(d.EnableHLS==false) { }}
    <font color="red">否</font>
    {{#  } }}
</script>

<script type="text/html" id="tfMP4Temp">

    {{#  if(d.EnableHLS==true){ }}
    <font color="#abe879">是</font>
    {{#  } else if(d.EnableHLS==false) { }}
    <font color="red">否</font>
    {{#  } }}
</script>

<script type="text/html" id="statusTemp">
{{
    d.ShowStatus
}}
</script>

<script type="text/html" id="bar">
    {{#  if(d.ShowStatus.indexOf('正常')>0){ }}
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" onclick="play('{{d.Id}}','{{d.StreamName}}')">播放</button>
    {{#  } else  { }}
    
    {{#  } }}
   
    <button class="layui-btn layui-btn-xs" lay-event="update" onclick="editStreamProxy('{{d.Id}}')">编辑</button>
</script>